<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>OSW</title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.css">
    <script src='js/jquery.js'></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            /* background-color: red; */
        }

        .container {
            margin: 20px;
        }

        .row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .label {
            width: 100px;
        }

        .value {
            flex-grow: 1;
        }

        .route {
            border: 2px solid #333333;
            padding: 5px;
        }

        .route_active {
            background-color: greenyellow;

        }

        .route_unactive {
            background-color: #f2f2f2;

        }

        .route_bad {
            /* background-color: rgb(255, 109, 109); */
            color: red;

            /* color: white; */
        }

        .dialog {
            display: none;
            position: fixed;
            background-color: white;
            border: 2px solid #3f94f5;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .dlg-set {
            margin: 20px;
        }

        .panel-heading {
            background-color: #3f94f5;
        }

        .panel-heading h1 {
            color: white;
        }

        .panel {
            /* pointer-events: none; */
            /* background-color:white; */
        }
    </style>
</head>

<body>

    <div class="container text-center ">
        <div class="panel panel-primary ">
            <div class="panel-heading">
                <h1>OSW 1xN</h1>
            </div>


            <table class="table my-4">
                <!-- <tr>
                    <th width=200px>探测器</th>
                    <th width=200px>实时值</th>
                    <th width=200px>阀值</th>
                    <th width=200px>波长</th>
                </tr> -->
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(1)">CH1</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(2)">CH2</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(3)">CH3</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(4)">CH4</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(5)">CH5</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(6)">CH6</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(7)">CH7</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(8)">CH8</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(9)">CH9</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(10)">CH10</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(11)">CH11</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(12)">CH12</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(13)">CH13</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(14)">CH14</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(15)">CH15</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(16)">CH16</button>
                    </td>
                </tr>
                <tr>
                    <td>
                    <div>--</div>
                </td>
                </tr>
                <tr>
                    <span></span>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(17)">CH17</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(18)">CH18</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(19)">CH19</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(20)">CH20</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(21)">CH21</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(22)">CH22</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(23)">CH23</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(24)">CH24</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(25)">CH25</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(26)">CH26</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(27)">CH27</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(28)">CH28</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(29)">CH29</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(30)">CH30</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(31)">CH31</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(32)">CH32</button>
                    </td>
                </tr>

                <tr>
                    <td>
                    <div>--</div>
                </td>
                </tr>

                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(33)">CH33</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(34)">CH34</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(35)">CH35</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(36)">CH36</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(37)">CH37</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(38)">CH38</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(39)">CH39</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(40)">CH40</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(41)">CH41</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(42)">CH42</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(43)">CH43</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(44)">CH44</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(45)">CH45</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(46)">CH46</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(47)">CH47</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(48)">CH48</button>
                    </td>
                </tr>
                <tr>
                    <td>
                    <div>--</div>
                </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(49)">CH49</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(50)">CH50</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(51)">CH51</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(52)">CH52</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(53)">CH53</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(54)">CH54</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(55)">CH55</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(56)">CH56</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(57)">CH57</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(58)">CH58</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(59)">CH59</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(60)">CH60</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(61)">CH61</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(62)">CH62</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(63)">CH63</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(64)">CH64</button>
                    </td>
                </tr>
                <tr>
                    <td>
                    <div>--</div>
                </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(65)">CH65</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(66)">CH66</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(67)">CH67</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(68)">CH68</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(69)">CH69</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(70)">CH70</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(71)">CH71</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(72)">CH72</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(73)">CH73</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(74)">CH74</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(75)">CH75</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(76)">CH76</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(77)">CH77</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(78)">CH78</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(79)">CH79</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(80)">CH80</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(81)">CH81</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(82)">CH82</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(83)">CH83</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(84)">CH84</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(85)">CH85</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(86)">CH86</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(87)">CH87</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(88)">CH88</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(89)">CH89</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(90)">CH90</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(91)">CH91</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(92)">CH92</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(93)">CH93</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(94)">CH94</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(95)">CH95</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(96)">CH96</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(97)">CH97</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(98)">CH98</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(99)">CH99</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(100)">CH100</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(101)">CH101</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(102)">CH102</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(103)">CH103</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(104)">CH104</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(105)">CH105</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(106)">CH106</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(107)">CH107</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(108)">CH108</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(109)">CH109</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(110)">CH110</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(111)">CH111</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(112)">CH112</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(113)">CH113</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(114)">CH114</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(115)">CH115</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(116)">CH116</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(117)">CH117</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(118)">CH118</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(119)">CH119</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(120)">CH120</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(121)">CH121</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(122)">CH122</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(123)">CH123</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(124)">CH124</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(125)">CH125</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(126)">CH126</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(127)">CH127</button>
                    </td>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="sendCurlRequest(128)">CH128</button>
                    </td>
                </tr>




            </table>
        </div>


    </div>


    <script>
        function sendCurlRequest(channel) {
            // var url = 'http://192.168.1.200/cgi-bin/cmd-osw.cgi?ch=' + channel;
            var url = 'cgi-bin/cmd-osw.cgi?ch=' + channel;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.send();
        }
    </script>
</body>

</html>